<script lang="ts" setup>
import { onMounted, onUnmounted, ref } from "vue";
import AMapLoader from "@amap/amap-jsapi-loader";
import { getDitu } from "../api/axios";
const getditu = async () => {
  const { status, data } = await getDitu();
  console.log(data.data);
  if (status == 200) {
    date.value = data.data;
    itemId.value = data.data[0].id;
  }
};
let x = ref("116.34351300000004");
let y = ref("40.060244");
let itemId = ref("");
const date = ref([]);
let map: any = null;
let cons = () => {
  AMapLoader.load({
    key: "a92f54406e6bddf2b6c004f3c70b2a75", // 申请好的Web端开发者Key，首次调用 load 时必填
    version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      var text = new AMap.Text({
        text: "默认打卡范围", //标记显示的文本内容
        anchor: "center", //设置文本标记锚点位置
        draggable: true, //是否可拖拽
        cursor: "pointer", //指定鼠标悬停时的鼠标样式。
        angle: 10, //点标记的旋转角度
        style: {
          //设置文本样式，Object 同 css 样式表
          padding: ".75rem 1.25rem",
          "margin-bottom": "1rem",
          "border-radius": ".25rem",
          "background-color": "white",
          width: "15rem",
          "border-width": 0,
          "box-shadow": "0 2px 6px 0 rgba(114, 124, 245, .5)",
          "text-align": "center",
          "font-size": "20px",
          color: "blue",
        },
        position: [y.value, x.value], //点标记在地图上显示的位置
      });
      text.setMap(map); //将文本标记设置到地图上
      map = new AMap.Map("container", {
        // 设置地图容器id
        viewMode: "3D", // 是否为3D地图模式
        zoom: 11, // 初始化地图级别
        center: [x.value, y.value], // 初始化地图中心点位置
      });
      //创建一个 Marker 实例：
      const marker = new AMap.Marker({
        position: new AMap.LngLat(x.value, y.value), //经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
        title: "北京",
      });
      //将创建的点标记添加到已有的地图实例：
      map.add(marker);
      // //多个点实例组成的数组
      // const markerList = [marker1, marker2, marker3];
      // map.add(markerList);
      //设置圆形位置
      var center = new AMap.LngLat(x.value, y.value);
      //设置圆的半径大小
      var radius = 1000;
      //创建圆形 Circle 实例
      var circle = new AMap.Circle({
        center: center, //圆心
        radius: value1.value, //半径
        borderWeight: 3, //描边的宽度
        strokeColor: "rgb(162, 163, 246)", //轮廓线颜色
        strokeOpacity: 5, //轮廓线透明度
        strokeWeight: 2, //轮廓线宽度
        fillOpacity: 0.5, //圆形填充透明度
        strokeStyle: "solid", //轮廓线样式
        strokeDasharray: [10, 10],
        fillColor: "#1791fc", //圆形填充颜色
        zIndex: 50, //圆形的叠加顺序
      });
      //圆形 Circle 对象添加到 Map
      map.add(circle);
      //根据覆盖物范围调整视野
      map.setFitView([circle]);
    })
    .catch((e) => {
      console.log(e);
    });
};

onMounted(() => {
  getditu(), cons();
});
//  进度条
const value1 = ref<number>(412);
onUnmounted(() => {
  map?.destroy();
});

let ditus = (obj: any) => {
  itemId.value = obj.id;
  console.log(obj);
  x.value = obj.point[0];
  y.value = obj.point[1];
  cons();
};
const price = () => {
  window.history.back();
};
</script>

<template>
  <div class="asd"><span @click="price()">×</span></div>
  <div class="box">
    <div id="container"></div>
    <div></div>
    <div class="slider">
      <div v-for="item in date" :key="item.id" class="silders">
        <div @click="ditus(item)" :class="item.id == itemId ? 'act' : ''">
          {{ item.name }}
        </div>
      </div>
      半径
      <a-slider v-model:value="value1" max="1000" @afterChange="cons" />
    </div>
  </div>
</template>

<style scoped>
.asd {
  text-align: right;
  font-size: 40px;
}
#container {
  width: 100%;
  height: 918px;
}

.slider {
  width: 500px;
  height: 100%;
}

.box {
  display: flex;
}

.act {
  background-color: rgb(0, 88, 245);
  color: white;
}

.silders {
  width: 200px;
  height: 40px;
  text-align: center;
  line-height: 40px;
}

.active {
  background-color: blue;
}
</style>
